import React from 'react';
import PropTypes from 'prop-types';
import deleteIcon from '@/src/assets/icon/IconC/delete.png';
import editIcon from '@/src/assets/icon/IconC/edit.png';
import deleteHoverIcon from '@/src/assets/icon/IconC/deleteHover.png';
import editHoverIcon from '@/src/assets/icon/IconC/editHover.png';
import downloadIcon from '@/src/assets/icon/IconC/download.png';
import downloadHoverIcon from '@/src/assets/icon/IconC/downloadHover.png';
import upRegulate from '@/src/assets/icon/IconC/upRegulate.png';
import downRegulate from '@/src/assets/icon/IconC/downRegulate.png';
import packUp from '@/src/assets/icon/IconC/packup.png';
import newly from '@/src/assets/icon/IconC/newly.png';
import cancle from '@/src/assets/icon/IconC/cancle.png';
import save from '@/src/assets/icon/IconC/save.png';
import rateMessage from '@/src/assets/icon/IconC/rateMessage.png';
import rateMessageRightArrow from '@/src/assets/icon/IconC/rateMessageRightArrow.png';
import money from '@/src/assets/icon/IconC/money.png';
import minus from '@/src/assets/icon/IconC/minus.png';
import plus from '@/src/assets/icon/IconC/plus.png';
import info from '@/src/assets/icon/IconC/info.png';
import editIconWarning from '@/src/assets/icon/IconC/editWaring.png';
import delIconWarning from '@/src/assets/icon/IconC/delWaring.png';
import arrow from '@/src/assets/icon/IconC/arrow.png';
import search from '@/src/assets/icon/IconC/search.png';

import { Tooltip } from 'antd';

class IconC extends React.Component {
  // 默认值
  static defaultProps = {
    type: '', // 默认无图标类型
    onClick: () => {}, // 默认无点击事件
    style: {}, // 样式
    className: '', // 类名
    isHover: true, //鼠标悬停是否更换图标，默认true
    placement: 'top', //tooltip 显示位置 top left right bottom topLeft topRight bottomLeft bottomRight leftTop leftBottom rightTop rightBottom
    title: undefined, //tooltip 显示内容
  };
  state = {
    hoverState: false, //判断鼠标是否移入图标
    IconObj: {
      edit: editIcon, //编辑
      delete: deleteIcon, //删除
      download: downloadIcon, //下载
      upRegulate: upRegulate, //上调
      downRegulate: downRegulate, //下调
      packUp: packUp, //收起
      newly: newly, //新增
      cancle: cancle, //取消
      save: save, //保存
      rateMessage: rateMessage, //汇率信息
      rateMessageRightArrow: rateMessageRightArrow, //汇率信息-箭头
      money: money, //金额
      minus: minus, //减
      plus: plus, //加
      info: info, //提示信息
      editWarning: editIconWarning, //编辑橙色
      delWarning: delIconWarning, //删除橙色
      editBlue: editHoverIcon, //编辑 蓝色
      deleteBlue: editHoverIcon, //删除 蓝色
      arrow: arrow, //收起
      search: search, //搜索/查询
    },
    IconHoverObj: {
      edit: editHoverIcon, //编辑
      delete: deleteHoverIcon, //删除
      download: downloadHoverIcon, //下载
      upRegulate: upRegulate, //上调
      downRegulate: downRegulate, //下调
      packUp: packUp, //收起
      arrow: arrow, //收起
      newly: newly, //新增
      cancle: cancle, //取消
      save: save, //保存
      rateMessage: rateMessage, //汇率信息
      rateMessageRightArrow: rateMessageRightArrow, //汇率信息-箭头
      money: money, //金额
      minus: minus, //减
      plus: plus, //加
      info: info, //提示信息
      editWarning: editIconWarning, //编辑橙色
      delWarning: delIconWarning, //删除橙色
      editBlue: editHoverIcon, //编辑 蓝色
      deleteBlue: deleteHoverIcon, //删除 蓝色
      search: search, //搜索/查询
    },
  };

  // 鼠标移入
  onMouseOver = () => {
    this.setState({
      hoverState: true,
    });
  };
  // 鼠标移出
  onMouseOut = () => {
    this.setState({
      hoverState: false,
    });
  };
  render() {
    const { type, style, className, onClick, isHover, title, placement } = this.props;
    const { IconHoverObj, IconObj } = this.state;
    return (
      <Tooltip placement={placement} title={title}>
        <img
          className={className}
          style={{ width: '14px', height: '14px', lineHeight: '14px', cursor: 'pointer', ...style }}
          alt=''
          src={isHover ? (this.state.hoverState ? IconHoverObj[type] : IconObj[type]) : IconHoverObj[type]}
          onClick={(e) => {
            e.stopPropagation(); //阻止冒泡
            // 抛出iconId
            onClick();
          }}
          onMouseOver={this.onMouseOver}
          onMouseOut={this.onMouseOut}
        />
      </Tooltip>
    );
  }
}
// props默认值
IconC.propsTypes = {
  /* 图标类型枚举  type
    1).编辑-edit
    2).删除-delete
    3).下载-download
    4).上调-upRegulate
    5).下调-downRegulate
    6).新增-newly
    7).收起-packUp
    8).新增-newly
    9).取消-cancle
    10).保存-save
    11).汇率信息-rateMessage
    12).汇率信息-箭头-rateMessageRightArrow
    13).金额-money
    14).加-plus
    15).减-minus
    16).查询搜索-search
    */
  type: PropTypes.string, // 图标类型
  onClick: PropTypes.func, // 按钮点击事件
  style: PropTypes.object, // 样式
  className: PropTypes.string, // 类名
  isHover: PropTypes.bool, // 鼠标悬停是否更换图标
};
export default IconC;
